<template>
  <div>
    <svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
      <g clip-path="url(#clip0_2_2)">
        <!-- 动画运动的路线，画线的顺序决定动画在这条路径线上移动的方向 -->
        <path id="movePath" d="M0 264.871C371.7 497.767 142.555 -165.452 500 264.871" stroke="white" />
      </g>
      <defs>
        <clipPath id="clip0_2_2">
          <rect width="500" height="500" fill="white" />
        </clipPath>
      </defs>
      <!-- 飞机路径组，transform将横纵坐标（即中心点坐标）往左上角移动飞机svg本身宽高的一半，避免飞机中心不在线上 -->
      <g
        id="myAirplane"
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-width="4"
        transform="translate(-24, -24)"
      >
        <path d="M42 35h-8m-3 7h-4" />
        <path stroke-linejoin="round" d="m14 22l-6-5H4s5.486 10 8 10h32l-6-5z" />
        <path
          stroke-linejoin="round"
          d="m30 22l-11.34-8H16l3 8m11 5L17.2 39H14l4.267-12M32 11c0 1-3 2-3 2h10s2.886 0 3.745-2.286C43.63 8.36 42.045 5 39.022 5S36 8 36 8s-1.855-.571-3 0s-1 2-1 3"
        />
      </g>
      <!-- <circle id="myCircle" r="30" fill="#ff0000"></circle> -->
      <!-- 给圆添加动画，绑定圆的id，设置跑完路径消耗的时间为2s，设置动画重复 -->
      <!-- <animateMotion href="#myCircle" dur="2s" repeatCount="indefinite"> -->
      <!-- 给飞机添加动画。
        href绑定飞机的id；
        dur设置2s表示跑完一次动画消耗的时间为2秒；
        repeatCount设置indefinite表示动画重复；
        rotate设置auto表示飞机的方向自动跟随线的方向，还可以设置auto-reverse表示自动反向跟随线的方向。
      -->
      <animateMotion href="#myAirplane" dur="2s" repeatCount="indefinite" rotate="auto">
        <!-- 给圆|飞机绑定的动画路径 -->
        <mpath href="#movePath"></mpath>
      </animateMotion>
    </svg>
  </div>
</template>

<!-- 安装vite-plugin-vue-setup-extend插件让<script setup>标签</script>可以直接自定义组件名 -->
<script setup lang="ts" name="SvgView"></script>

<style lang="scss" scoped></style>
